<template>
	<view class="container">
		<view class="row">
			<text class="tit">问题类型</text>
			<input class="input" type="text" v-model="type" placeholder="无法获取验证码" />
		</view>

		<view class="row area-row">
			<text class="tit">具体描述</text>
			<textarea placeholder-style="color:#999" placeholder="请输入具体描述" auto-height maxlength="-1" v-model="info"></textarea>
		</view>

		<view class="row area-row">
			<uni-upimg @change="getImageInfo" :upimg_preview="serviceArr" :upload_count="3"></uni-upimg>
		</view>

		<view class="row">
			<text class="tit">联系方式</text>
			<input class="input" type="number" v-model="tel" placeholder="请输入手机号码" />
		</view>

		<view class="row">
			<text class="txt" style="color:#999">温馨提示: 充值或购买未到账,必须提供账单截图</text>
		</view>

		<button type="primary" class="add-btn" @click="confirm">提交</button>
	</view>
</template>

<script>
	import uniUpimg from '@/components/uni-upimg.vue'
	export default {
		components: {
			uniUpimg
		},
		data() {
			return {
				placeholder: '开始输入...',
				info: '',
				type: '',
				tel: '',
				serviceArr: []
			}
		},
		onLoad(option) {},
		methods: {
			getImageInfo(e) {
				this.serviceArr = e
			},
			//提交
			confirm() {
				if (!this.type) {
					this.$api.msg('请填写问题类型')
					return
				}
				if (!this.info) {
					this.$api.msg('请填写具体描述')
					return
				}
				if (!this.tel) {
					this.$api.msg('请填写联系方式')
					return
				}
				console.log(this.serviceArr)
				this.$api.request('/ContactUs/userContactUs', {
					problemType: this.type,
					problemDescription: this.info,
					phone: this.tel,
					problemPicture: this.serviceArr.join(",")
				}).then(res => {
					console.log(res)
					this.$api.msg('提交成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				})
			},
		}
	}
</script>

<style lang="scss">
	.row {
		.tit {
			flex-shrink: 0;
			width: 150upx;
			font-size: $base-font-base;
			color: $base-color-dark;
		}

		textarea {
			flex: 1;
			width: auto;
			font-size: $base-font-base;
			color: $base-color-dark;
			line-height: 38upx;
		}
	}

	.area-row {
		height: inherit;
		padding: 30upx $base-row-spacing;
	}
</style>
